<template>
  <div class="view-container">
    <el-form :model="queryParam" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker type="datetime" v-model="queryParam.startTime" placeholder="开始时间"
                            class="width-control"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker type="datetime" v-model="queryParam.endTime" placeholder="结束时间"
                            class="width-control"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作人" prop="userId">
            <el-select v-model="queryParam.userId" placeholder="请选择操作人" :show-search="true"
                       :allow-clear="true" class="width-control">
              <el-option v-for="item in userList" :value="item.id"
                         :label="item.nickname"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="handleQuery">搜索</el-button>
            <el-button @click="resetParams">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nebula-table :data="tableData" :columns="columns" header-row-class-name="header-row-class" size="default" border
                  :total="rowsTotal" :default-page-size="10" show-overflow-tooltip @change="changePage">
    </nebula-table>
  </div>
</template>
<script setup>
import {getNormalUser} from "@/api/sysUser.js";
import {getTableData} from "@/api/loginLog.js";
import NebulaTable from "@/components/NebulaTable.vue";

defineOptions({
  name: 'sysLogin'
})

const queryParam = ref({
  startTime: "",
  endTime: "",
  userId: "",
  pageNum: 1,
  pageSize: 10
})

const userList = ref([])

const rowsTotal = ref(0)
const tableData = ref([])

const page = reactive({
  current: queryParam.value.pageNum,
  limit: queryParam.value.pageSize,
  total: rowsTotal,
  layout: ["prev", "page", "next", "limits", "count"],
});

const columns = [
  {title: "登录时间", key: "loginTime", align: 'center', width: '250'},
  {title: "登录账号", key: "nickname", align: 'center', width: '150'},
  {title: "登录IP", key: "loginIp", align: 'center', width: '100'},
  {title: "浏览器", key: "loginBrowser", align: 'center', ellipsisTooltip: true},
  {title: "浏览器引擎", key: "loginEngine", align: 'center', ellipsisTooltip: true},
  {title: "系统平台", key: "loginPlatform", align: 'center', ellipsisTooltip: true},
  {title: "操作系统", key: "loginOs", align: 'center', ellipsisTooltip: true}
]

const getUserList = () => {
  getNormalUser().then(res => {
    userList.value = res.data
  })
}

const handleQuery = () => {
  getTableData(queryParam.value).then(res => {
    tableData.value = res.data.rows
    rowsTotal.value = res.data.total
  })
}

const resetParams = () => {
  for (let key in queryParam.value) {
    if (key !== "pageNum" && key !== "pageSize") {
      queryParam.value[key] = null;
    }
  }
}

const changePage = (currentPage,pageSize) => {
  queryParam.value.pageNum = currentPage
  queryParam.value.pageSize = pageSize
  handleQuery()
}

onMounted(() => {
  getUserList()
  handleQuery()
})
</script>
